<template>
    <el-card shadow="never" class="box" style="max-width: 450px">
        <template #header>
            <div class="title">{{ props.title }}</div>
        </template>

        <div class="content">
            <p class="ellipsis"> {{ props.content }}</p>
        </div>

        <template #footer>
            <div @click="getAny" class="end">了解更多</div>
        </template>
    </el-card>

    <el-dialog v-model="centerDialogVisible" :title="props.title" width="500" align-center>
        <p class="anytext">{{ props.content }}</p>
    </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'

const centerDialogVisible = ref(false)

const getAny = () => {
    centerDialogVisible.value = true
}

const props = defineProps({
    title: String,
    content: String,
})


</script>

<style scoped>
.box {
    margin-bottom: 20px;
}


.anytext {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2;
}

.end {
    font-size: 14px;
    color: #4facfe;
    cursor: pointer;
}

.content {

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2;


    .ellipsis {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        /* 表示显示三行 */
        line-height: 2em;
        /* 行高 */
        max-height: 8em;
        /* 最大高度 = 行高 × 行数 */
    }
}



.title {
    font-size: 24px;
    font-weight: 700;
    background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientFlow 3s linear infinite;
}
</style>